import * as type from './type.js'
import * as api from './api.js'
/**
 *  mutations
 *  更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。 Vuex 中的 mutations 非常类似于事件：
 *   每个 mutation 都有一个字符串的 事件类型（type）和 一个 回调函数（handler）
 *    这个回调函数就是我们实际进行状态更改的地方， 并且它会接受 state 作为第一个参数

  * mutations 有一个固有参数 state， 接收的是 Vuex 中的 state 对象
  * action 也有一个固有参数 context， 但是 context 是 state 的父级， 包含 state、 getters

*/
const mutations = {
  // 查询电影列表 - 定义方法, state 是固定参数
  [type.FETCH_MOVIES](state, payload){
    state.movies[payload.type].subjects = state.movies[payload.type].subjects.concat(payload.subjects)
    state.movies[payload.type].total    = state.movies[payload.type].subjects.length
    state.movies[payload.type].curPage += 1
    if(parseInt(state.movies[payload.type].total) == parseInt(payload.total)){
      state.movies[payload.type].isEnd = true
    }
  },

  [type.FETCH_MOVIES_QUERY](state, payload){

    state.movies.movieQuery.subjects = state.movies.movieQuery.subjects.concat(payload.data.subjects)
    state.movies.movieQuery.total    = state.movies.movieQuery.subjects.length
    state.movies.movieQuery.curPage += 1
    if(parseInt(state.movies.movieQuery.total) === parseInt(payload.total)){
      state.movies.movieQuery.isEnd = true
    }
  },

  [type.CLEAR_MOVIES_QUERY](state){
    state.movies.movieQuery.total    = 0
    state.movies.movieQuery.subjects = []
    state.movies.movieQuery.describe = ''
    state.movies.movieQuery.curPage  = 1
    state.movies.movieQuery.isEnd    = false
  },

  [type.CHANGE_MOVIES_TAB](state, tab){
    // console.log(tab)
    state.movies.tab = tab
    // state.dispatch(type.FETCH_MOVIES, {type: tab, start: (state.movies[tab].page - 1) * state.movies[tab].offset, count: state.movies[tab].offset})
  },
  [type.FETCH_LOADING](state, isLoading){
    state.movies.isLoading = isLoading
    console.log('=====>>>>>>' +state.movies.isLoading+'<<<<<<=========')
  },
  [type.UPDATE_MOVIES_SEARCH_STEP](state, searchStep){
    state.movies.searchStep = searchStep
  }
};

/*
action 类似于 mutation， 不同在于：
  Action 提交的是 mutation， 而不是直接变更状态。
  Action 可以包含任意异步操作

  分发 Action
    Action 通过store.dispatch 方法触发：
      store.dispatch('increment') //increment 事件类型

**/
const actions = {
  // context 是固定参数
  [type.FETCH_MOVIES](context, payload){

    // console.log('---11111---->' + payload.type)
    context.commit(type.FETCH_LOADING, true)

    api.fetchMovies(payload.type, {start: payload.start || 0, count: payload.count || 20})
       .then(data => {
         context.commit(type.FETCH_MOVIES, { // commit 提交事件
           type: payload.type,
           subjects: data.subjects,
           total: data.total
         })
         // 关闭loading
         context.commit(type.FETCH_LOADING, false)
       }
     ).catch(err => {

       });
  },
  [type.FETCH_MOVIES_QUERY](context, payload){

    context.commit(type.FETCH_LOADING, true)
    console.log('---->>>>', payload, '<<<<<<<<111-----')
    api.fetchMoviesQuery({q: payload.q, start: payload.start || 0, count: payload.count || 20})
       .then(
         data => {
           context.commit(type.FETCH_MOVIES_QUERY, {data, q: payload.q, total: data.total})
           context.commit(type.FETCH_LOADING, false)
         }
       )

  },
  [type.CLEAR_MOVIES_QUERY](context) {
    context.commit(type.CLEAR_MOVIES_QUERY)
  },
  [type.CHANGE_MOVIES_TAB](context, tab){
    console.log('---------' + type.CHANGE_MOVIES_TAB)
    // Action 提交给 mutation， 而不是直接变更状态。
    // 这里的 CHANGE_MOVIES_TAB 是
    /**
      Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，
      或者通过 context.state 和 context.getters 来获取 state 和 getters。
      当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。

      action 是可以异步执行的
      incrementAsync ({ commit }) {
        setTimeout(() => {
          commit('increment')
        }, 1000)
      }
    */
    context.commit(type.CHANGE_MOVIES_TAB, tab)
  },
  [type.UPDATE_MOVIES_SEARCH_STEP](context, searchStep){
    context.commit(type.UPDATE_MOVIES_SEARCH_STEP, searchStep)
  },
  [type.FETCH_LOADING](context, isLoading){
    context.commit(type.FETCH_LOADING, isLoading)
  }
};

const getters = {
  getShowTab(state){
    return state.MovieModule.movie.tab
  }
}

export default{
  state: {
    movies: {
      [api.MOVIESTYPE.inTheaters]: {
        total: 0,
        subjects: [],
        describe: [],
        curPage: 1,
        isEnd :false

      },
      [api.MOVIESTYPE.comingSoon]: {
        total: 0,
        subjects: [],
        describe: [],
        curPage: 1,
        isEnd :false
      },
      movieQuery: {
          total: 0,
          subjects: [],
          describe: '',
          q: '',
          curPage: 1,
          isEnd :false
      },
      tab : 'in_theaters',
      searchStep : 1,
      isLoading  : false,
      offset     : 12
    }
  },
  mutations,
  actions,
  getters
}
